import type { Directive } from 'vue'

// 导出一个名为copyText的指令
export const copyText: Directive = {
  // 在元素挂载之前执行
  beforeMount(el, { value, arg }) {
    // 如果指令的参数为callback
    if (arg === 'callback') {
      // 将指令的值赋给元素的$copyCallback属性
      el.$copyCallback = value
    } else {
      // 否则将指令的值赋给元素的$copyValue属性
      el.$copyValue = value
      // 定义一个异步函数
      const handler = async () => {
        // 调用copyTextToClipboard函数，将元素的$copyValue属性作为参数传入
        const copyFlag = await copyTextToClipboard(el.$copyValue)
        // 如果元素的$copyCallback属性存在
        if (el.$copyCallback) {
          // 调用$copyCallback函数，将copyFlag和$copyValue作为参数传入
          el.$copyCallback(copyFlag, el.$copyValue)
        }
      }
      // 给元素添加点击事件，点击时执行handler函数
      el.addEventListener('click', handler)
      // 定义一个函数，用于移除点击事件
      el.$distroyCopy = () => el.removeEventListener('click', handler)
    }
  }
}

// 定义一个函数，用于将文本复制到剪贴板
export function copyTextToClipboard(
  textToCopy: string,
  { target = document.body } = {}
) {
  // 返回一个Promise对象
  return new Promise((resolve) => {
    // 如果浏览器支持Clipboard API，并且当前页面是安全上下文
    if (navigator.clipboard && window.isSecureContext) {
      // 调用Clipboard API的writeText方法，将textToCopy作为参数传入
      navigator.clipboard
        .writeText(textToCopy)
        // 如果复制成功，resolve为true
        .then(() => {
          resolve(true)
        })
        // 如果复制失败，打印错误信息，resolve为false
        .catch((err) => {
          console.log('Failed to copy text: ', err)

          resolve(false)
        })
    } else {
      // 否则创建一个textarea元素
      const textArea = document.createElement('textarea')
      // 将textToCopy赋值给textarea的value属性
      textArea.value = textToCopy
      // 将textarea添加到目标元素中
      target.appendChild(textArea)
      // 选中textarea中的文本
      textArea.select()
      let isSuccess = false
      try {
        // 调用document的execCommand方法，将copy命令作为参数传入
        isSuccess = document.execCommand('copy')
      } catch (err) {
        // 如果复制失败，打印错误信息
        console.log('Failed to copy text: ', err)
        isSuccess = false
      }
      // 将textarea从目标元素中移除
      document.body.removeChild(textArea)
      // resolve为isSuccess
      resolve(isSuccess)
    }
  })
}
